<template>
  <div class="h-main overflow-x-hidden dark:bg-zinc-900 duration-1000">
    <DHeaderVue class="h-header" />
    <router-view />
    <My-float
      @click="handleClick"
      showPosition="right-4 bottom-4"
      iconStyleClass="w-3 h-4 mb-[10px] dark:text-zinc-300"
      :iconList="iconList"
      isShowPopover
      :popoverContent="['OpenAI', 'BackTop', 'LeaveMessage']"
    />
    <Teleport to="body">
      <showToolsPanel
        :isShowToolsPanel="isRender"
        @update-value="updateValue"
        :isActivedComponent="isActivedComponent"
        class="fixed left-0 top-0 z-50 animate__animated animate__fadeInLeft duration-500"
      />
    </Teleport>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DHeaderVue from '../Header/index.vue'
import showToolsPanel from '@/components/showToolsPanel/index.vue'
const iconList = ['OpenAi', 'guide', 'remind']
const isRender = ref(false)
const isActivedComponent = ref('OpenAi')
const handleClick = (componentName) => {
  isRender.value = !isRender.value
  isActivedComponent.value = componentName
}

const updateValue = (isShowToolsPanel) => {
  isRender.value = isShowToolsPanel
}
</script>

<style lang="scss" scoped></style>
